<template>
	<view class="">
		<view class="top"></view>
		<view class="main">
			<view class="title">
				{{miantitle}}
			</view>
			<view class="list">
				<view class="list-view">
					商户类型：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="请输入商户类型" :value="allsubit.st_type" v-model="allsubit.st_type" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					商店名称：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="商店名称" :value="allsubit.st_storename"
						v-model="allsubit.st_storename" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					详细地址：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="商户详细地址" :value="allsubit.st_addr" v-model="allsubit.st_addr" />
					<!-- <textarea  auto-height placeholder="商户详细地址" :value="allsubit.st_addr" v-model="allsubit.st_addr"/> -->
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					法人：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="法人" :value="allsubit.st_man" v-model="allsubit.st_man" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					电话：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="电话" :value="allsubit.st_tel" v-model="allsubit.st_tel" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					备注：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="备注" :value="allsubit.remark" v-model="allsubit.remark" />
				</view>
			</view>
		</view>

		<view class="main2">
			<view class="list2">
				<view class="list-view">
					身份证号：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="身份证号" :value="allsubit.st_sfz" v-model="allsubit.st_sfz" />
				</view>
			</view>
			<view class="list2" @click="chooseImg('st_img_sfz1')">
				<view style="display: flex; flex-direction:column;margin-left: 1rem;">
					<view style="margin-top:1rem;font-weight: 500;">
						身份证照片正面
					</view>
				</view>
				<view class="">
					<view
						style="border: 1px solid black;width: 6rem;height: 4rem;margin-right: 1rem;margin-top: 0.5rem;">
						<image :src="st_img_sfz1" style="width: 6rem;height: 4rem;"></image>
					</view>
				</view>
			</view>
			<view class="list2" @click="chooseImg('st_img_sfz2')">
				<view style="display: flex; flex-direction:column;margin-left: 1rem;">
					<view style="margin-top:1rem;font-weight: 500;">
						身份证照片反面
					</view>
				</view>
				<view class="">
					<view
						style="border: 1px solid black;width: 6rem;height: 4rem;margin-right: 1rem;margin-top: 0.5rem;">
						<image :src="st_img_sfz2" style="width: 6rem;height: 4rem;"></image>
					</view>
				</view>
			</view>
			<view class="list2-title">
				<view v-if="st_img_sfz1" @click="deleteimg('st_img_sfz1')">
					删除身份证正面照
				</view>
				<view v-if="st_img_sfz2" @click="deleteimg('st_img_sfz2')">
					删除身份证反面照
				</view>
			</view>
		</view>

		<view class="main2">
			<view class="list2">
				<view class="list-view">
					银行卡号：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="银行卡号" :value="allsubit.st_yhcard" v-model="allsubit.st_yhcard" />
				</view>
			</view>
			<view class="list2">
				<view class="list-view">
					银行卡支行名称：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="银行卡支行名称" :value="allsubit.st_khyh" v-model="allsubit.st_khyh" />
				</view>
			</view>
			<view class="list2" @click="chooseImg('st_img_yhcard')">
				<view style="display: flex; flex-direction:column;margin-left: 1rem;">
					<view style="margin-top:1rem;font-weight: 500;">
						银行卡照片
					</view>
				</view>
				<view class="">
					<view
						style="border: 1px solid black;width: 7rem;height: 4rem;margin-right: 1rem;margin-top: 0.5rem;">
						<image :src="st_img_yhcard" style="width: 7rem;height: 4rem;"></image>
					</view>
				</view>
			</view>
			<view class="list2-title">
				<view v-if="st_img_yhcard" @click="deleteimg('st_img_yhcard')">
					删除银行卡照片
				</view>
			</view>
		</view>

		<view class="main2">
			<view class="list2" @click="chooseImg('st_img_photo1')">
				<view style="display: flex; flex-direction:column;margin-left: 1rem;">
					<view style="margin-top:1rem;font-weight: 500;">
						店面照片门头照
					</view>
				</view>
				<view class="">
					<view
						style="border: 1px solid black;width: 4rem;height: 4rem;margin-right: 1rem;margin-top: 0.5rem;">
						<image :src="st_img_photo1" style="width: 4rem;height: 4rem;"></image>
					</view>
				</view>
			</view>
			<view class="list2" @click="chooseImg('st_img_photo2')">
				<view style="display: flex; flex-direction:column;margin-left: 1rem;">
					<view style="margin-top:1rem;font-weight: 500;">
						店内照
					</view>
				</view>
				<view class="">
					<view
						style="border: 1px solid black;width: 4rem;height: 4rem;margin-right: 1rem;margin-top: 0.5rem;">
						<image :src="st_img_photo2" style="width: 4rem;height: 4rem;"></image>
					</view>
				</view>
			</view>
			<view class="list2" @click="chooseImg('st_img_photo3')">
				<view style="display: flex; flex-direction:column;margin-left: 1rem;">
					<view style="margin-top:1rem;font-weight: 500;">
						收银台照片
					</view>
				</view>
				<view class="">
					<view
						style="border: 1px solid black;width: 4rem;height: 4rem;margin-right: 1rem;margin-top: 0.5rem;">
						<image :src="st_img_photo3" style="width: 4rem;height: 4rem;"></image>
					</view>
				</view>
			</view>
			<view class="list2-title">
				<view v-if="st_img_photo1" @click="deleteimg('st_img_photo1')">
					删除店面照片门头照
				</view>
				<view v-if="st_img_photo2" @click="deleteimg('st_img_photo2')">
					删除店内照
				</view>
				<view v-if="st_img_photo3" @click="deleteimg('st_img_photo3')">
					删除收银台照片
				</view>
			</view>
		</view>
		<view class="bottom" @click="subit()" id="buttomName">
			{{subitName}}
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
		data() {
			return {
				ysbase64: '',
				miantitle: '申请店铺信息',
				//照片
				st_img_photo1: '',
				st_img_photo2: '',
				st_img_photo3: '',
				// 身份证
				st_img_sfz1: '',
				st_img_sfz2: '',
				//银行卡
				st_img_yhcard: '',
				allsubit: {},
				subitName: '确认提交',
				mainmsg: '',
				token: ''
			}
		},
		onLoad: function(options) {
			this.mainmsg = uni.getStorageSync('mainmsg');
			this.token = uni.getStorageSync('token');
			if (options.id) {
				this.miantitle = '店铺详情'
				this.subitName = '修改'
				let data = {
					'Id': options.id
				}
				let _this = this
				uni.request({
					url: _this.$title + 'AppUserFeatures/GetMyStoreInfo',
					data: data,
					header: {
						'auth': _this.token
					},
					success: (res) => {
						if (res.data.status === 200) {
							_this.allsubit = res.data.data
							_this.st_img_sfz1 = _this.allsubit.st_img_sfz1
							_this.st_img_sfz2 = _this.allsubit.st_img_sfz2
							_this.st_img_photo1 = _this.allsubit.st_img_photo1
							_this.st_img_photo2 = _this.allsubit.st_img_photo2
							_this.st_img_photo3 = _this.allsubit.st_img_photo3
							_this.st_img_yhcard = _this.allsubit.st_img_yhcard
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.message
							})
						}
					}
				});
			}
		},

		onUnload: function() {

		},
		methods: {
			deleteimg(msg) {
				let that = this
				switch (msg) {
					case 'st_img_sfz1':
						that.st_img_sfz1 = ''
						that.allsubit.st_img_sfz1 = ''
						break;
					case 'st_img_sfz2':
						that.st_img_sfz2 = ''
						that.allsubit.st_img_sfz2 = ''
						break;
					case 'st_img_photo1':
						that.st_img_photo1 = ''
						that.allsubit.st_img_photo1 = ''
						break;
					case 'st_img_photo2':
						that.st_img_photo2 = ''
						that.allsubit.st_img_photo2 = ''
						break;
					case 'st_img_photo3':
						that.st_img_photo3 = ''
						that.allsubit.st_img_photo3 = ''
						break;
					case 'st_img_yhcard':
						that.st_img_yhcard = ''
						that.allsubit.st_img_yhcard = ''
						break;
					default:

						break;
				}
			},
			imgToBase64(data) {
				return new Promise((resolve, reject) => {
					pathToBase64(data).then(base64 => {
						resolve(base64)
					}).catch(error => {
						console.error(error)
						reject(error)
					})
				})
			},
			preview(msg){
				let imgsArray = [];
				base64ToPath(msg).then(path => {
					imgsArray[0] = path
					uni.previewImage({
						current: 0,
						urls: imgsArray
					})
				})
			},
			
			chooseImg(msg) {
				let that = this
				switch (msg) {
					case 'st_img_sfz1':
						if(that.st_img_sfz1){
							that.preview(that.st_img_sfz1)
							return;
						}
						break;
					case 'st_img_sfz2':
						if(that.st_img_sfz2){
							that.preview(that.st_img_sfz2)
							return;
						}
						break;
					case 'st_img_photo1':
						if(that.st_img_photo1){
							that.preview(that.st_img_photo1)
							return;
						}
						break;
					case 'st_img_photo2':
						if(that.st_img_photo2){
							that.preview(that.st_img_photo2)
							return;
						}
						break;
					case 'st_img_photo3':
						if(that.st_img_photo3){
							that.preview(that.st_img_photo3)
							return;
						}
						break;
					case 'st_img_yhcard':
						if(that.st_img_yhcard){
							that.preview(that.st_img_yhcard)
							return;
						}
						break;
					default:
				
						break;
				}
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						that.imgToBase64(res.tempFilePaths[0]).then(base64 => {
							let s = that.imageSize(base64)
							if (s > 360000) {
								uni.getImageInfo({
									src: res.tempFilePaths[0],
									success: function(image) {
										that.dealImage(base64, image.width, msg)
										// that.st_img_sfz1 = sss
										// that.allsubit.st_img_sfz1 = sss

									}
								});
								return
							}

							switch (msg) {
								case 'st_img_sfz1':
									that.st_img_sfz1 = base64
									that.allsubit.st_img_sfz1 = base64
									// that.allsubit.st_img_sfz1 = res.tempFilePaths[0]
									break;
								case 'st_img_sfz2':
									that.st_img_sfz2 = base64
									that.allsubit.st_img_sfz2 = base64
									break;
								case 'st_img_photo1':
									that.st_img_photo1 = base64
									that.allsubit.st_img_photo1 = base64
									break;
								case 'st_img_photo2':
									that.st_img_photo2 = base64
									that.allsubit.st_img_photo2 = base64
									break;
								case 'st_img_photo3':
									that.st_img_photo3 = base64
									that.allsubit.st_img_photo3 = base64
									break;
								case 'st_img_yhcard':
									that.st_img_yhcard = base64
									that.allsubit.st_img_yhcard = base64
									break;
								default:
									break;
							}
						})

					}

				});
			},

			//压缩方法
			dealImage(base64, w, msg) {
				uni.showLoading({
				    title: '图片压缩中'
				});
				let that = this
				var newImage = new Image();
				var quality = 0.6; //压缩系数0-1之间
				newImage.src = base64;
				newImage.setAttribute("crossOrigin", 'Anonymous'); //url为外域时需要
				var imgWidth, imgHeight;
				newImage.onload = function() {
					imgWidth = this.width;
					imgHeight = this.height;
					var canvas = document.createElement("canvas");
					var ctx = canvas.getContext("2d");
					if (Math.max(imgWidth, imgHeight) > w) {
						if (imgWidth > imgHeight) {
							canvas.width = w;
							canvas.height = w * imgHeight / imgWidth;
						} else {
							canvas.height = w;
							canvas.width = w * imgWidth / imgHeight;
						}
					} else {
						canvas.width = imgWidth;
						canvas.height = imgHeight;
						quality = 0.6;
					}
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
					var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句
					// 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定
					// while (base64.length / 1024 > 150) {
					// 	quality -= 0.01;
					// 	base64 = canvas.toDataURL("image/jpeg", quality);
					// }
					// 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
					// while (base64.length / 1024 < 50) {
					// 	quality += 0.001;
					// 	base64 = canvas.toDataURL("image/jpeg", quality);
					// }
					let s = that.imageSize(base64)
					if (s > 360000) {
						that.dealImage(base64, w - 50, msg)
					} else {
						uni.hideLoading();
						switch (msg) {
							case 'st_img_sfz1':
								that.st_img_sfz1 = base64
								that.allsubit.st_img_sfz1 = base64
								// that.allsubit.st_img_sfz1 = res.tempFilePaths[0]
								break;
							case 'st_img_sfz2':
								that.st_img_sfz2 = base64
								that.allsubit.st_img_sfz2 = base64
								break;
							case 'st_img_photo1':
								that.st_img_photo1 = base64
								that.allsubit.st_img_photo1 = base64
								break;
							case 'st_img_photo2':
								that.st_img_photo2 = base64
								that.allsubit.st_img_photo2 = base64
								break;
							case 'st_img_photo3':
								that.st_img_photo3 = base64
								that.allsubit.st_img_photo3 = base64
								break;
							case 'st_img_yhcard':
								that.st_img_yhcard = base64
								that.allsubit.st_img_yhcard = base64
								break;
							default:

								break;
						}
					}
					// callback(base64); //必须通过回调函数返回，否则无法及时拿到该值

				}
			},


			imageSize(base64Str) {
				const indexBase64 = base64Str.indexOf('base64,');
				if (indexBase64 < 0) return -1;
				const str = base64Str.substr(indexBase64 + 6);
				return (str.length * 0.75).toFixed(2);
			},
			subit() {
				if (this.subitName === '已提交成功') {
					return
				}
				
				if(!this.allsubit.st_type){
					uni.showToast({
						icon: "none",
						title: '请填写商户类型'
					})
					return
				}
				
				if(!this.allsubit.st_storename){
					uni.showToast({
						icon: "none",
						title: '请填写商户名称'
					})
					return
				}
				
				if(!this.allsubit.st_addr){
					uni.showToast({
						icon: "none",
						title: '请填写商户地址'
					})
					return
				}
				
				if(!this.allsubit.st_man){
					uni.showToast({
						icon: "none",
						title: '请填写法人'
					})
					return
				}
				
				
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.allsubit.st_tel))){
					uni.showToast({title: '请填写电话',icon:"none"});
					return false; 
				} 
				
				if(!this.allsubit.st_sfz){
					uni.showToast({
						icon: "none",
						title: '请填写身份证号'
					})
					return
				}
				
				if(!this.allsubit.st_yhcard){
					uni.showToast({
						icon: "none",
						title: '请填写银行卡号'
					})
					return
				}
				
				

				let _this = this


				if (this.subitName === '修改') {
					uni.request({
						url: _this.$title + 'AppUserFeatures/ModifyMyStoreInfo',
						method: 'POST',
						data: _this.allsubit,
						header: {
							'auth': _this.token,
							'Content-Type': 'application/json; charset=utf-8'
						},
						success: (res) => {
							if (res.data.status === 200) {
								uni.showToast({
									icon: "none",
									title: res.data.message
								})
								_this.subitName = '已提交成功'
								var div = document.getElementById(
									'buttomName');
								div.setAttribute("class",
									"bottom-after");
							} else {
								uni.showToast({
									icon: "none",
									title: '提交失败'
								})
							}
						}
					});
				} else {
					_this.allsubit.AppUserInfoId = _this.mainmsg.Id
					_this.allsubit.st_type = 19
					// uni.request({
					// 	url: _this.$title + 'Organization/GetPPLPCode?Storetype=' + _this.allsubit.st_type,
					// 	header: {
					// 		'auth': _this.token
					// 	},
					// 	success: (res) => {
							_this.allsubit.plp_storecode = ''
							uni.request({
								// url: _this.$title + 'AppUserFeatures/AddMyStoreInfo?st_type=' + _this.allsubit
								// 	.st_type + '&st_storename=' + _this.allsubit.st_storename +
								// 	'&st_addr=' + _this.allsubit.st_addr + '&st_man=' + _this.allsubit
								// 	.st_man + '&st_tel=' + _this.allsubit.st_tel + '&st_img_photo1=' +
								// 	_this.allsubit.st_img_photo1 + '&st_img_photo2=' + _this.allsubit
								// 	.st_img_photo2 + '&st_img_photo3=' + _this.allsubit.st_img_photo3 +
								// 	'&st_sfz=' + _this.allsubit.st_sfz + '&st_img_sfz1=' + _this
								// 	.allsubit.st_img_sfz1 + '&st_img_sfz2=' + _this.allsubit
								// 	.st_img_sfz2 + '&st_yhcard=' + _this.allsubit.st_yhcard +
								// 	'&st_img_yhcard=' + _this.allsubit.st_img_yhcard + '&st_khyh=' +
								// 	_this.allsubit.st_khyh + '&remark=' + _this.allsubit.remark +
								// 	'&plp_storecode=' + _this.allsubit.plp_storecode +
								// 	'&AppUserInfoId=' + _this.allsubit.AppUserInfoId,
								// method: 'GET',
								url: _this.$title + 'AppUserFeatures/AddMyStoreInfo',
								method:"POST",
								data:_this.allsubit,
								header: {
									'auth': _this.token,
									'Content-Type': 'application/json; charset=utf-8'
								},
								success: (res) => {
									if (res.data.status === 200) {
										uni.showToast({
											icon: "none",
											title: res.data.message
										})
										_this.subitName = '已提交成功'
										var div = document.getElementById(
											'buttomName');
										div.setAttribute("class",
											"bottom-after");
									} else {
										uni.showToast({
											icon: "none",
											title: '提交失败'
										})
									}
								}
							});

					// 	}
					// });
				}

			}
		}
	}
</script>

<style>
	/* .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} */

	.top {
		width: 100%;
		height: 12rem;
		background-color: #18ab4e;
		border-bottom-left-radius: 1rem;
		border-bottom-right-radius: 1rem;
	}

	.main {
		/* position: relative; */
		background-color: white;
		margin: 0 auto;
		margin-top: -7rem;
		padding-bottom: 2rem;
		width: 88vw;
		box-shadow: 0px 0px 0.625rem #eaeaea;
		z-index: 1000;
		border-radius: 1.625rem;
	}

	.main2 {
		/* position: relative; */
		background-color: white;
		margin: 0 auto;
		margin-top: 2rem;
		padding-bottom: 2rem;
		width: 88vw;
		box-shadow: 0px 0px 0.625rem #eaeaea;
		z-index: 1000;
		border-radius: 1.625rem;
	}

	.list2 {
		/* position: relative; */
		/* padding-top: 4.5rem; */
		display: flex;
		justify-content: space-between;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: medium;
		border-bottom: 1px solid #ABB1BA;
		height: 5rem;
		line-height: 3.5rem;
		font-weight: 500;
	}

	.list2-title {
		display: flex;
		justify-content: space-between;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: small;
		height: 1rem;
		line-height: 3.5rem;
		font-weight: 500;
	}


	.title {
		/* position: relative; */
		padding-top: 4rem;
		text-align: center;
		font-size: x-large;
		font-weight: 400;
	}

	.list {
		/* position: relative; */
		/* padding-top: 4.5rem; */
		display: flex;
		justify-content: space-between;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: medium;
		border-bottom: 1px solid #ABB1BA;
		height: 3.5rem;
		line-height: 3.5rem;
		font-weight: 500;
	}

	.list-last {
		/* position: relative; */
		/* padding-top: 4.5rem; */
		/* display: flex; */
		justify-content: space-between;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: medium;
		float: right;
		/* border-bottom: 1px solid #ABB1BA; */
		height: 1rem;
		line-height: 3.5rem;
		font-weight: 500;
	}

	.list-view {
		width: 250rpx;
		white-space: nowrap;
	}

	.list-car {
		display: flex;
		justify-content: space-between;
	}

	input {
		height: 3.5rem;
		line-height: 3.5rem;
		font-weight: 500;
		font-size: medium;
		border: 0;
		outline: none;
		background-color: rgba(0, 0, 0, 0);
		width: 40vw;
	}

	.face {
		background-color: white;
		margin: 0 auto;
		margin-top: 1rem;
		height: 5rem;
		width: 88vw;
		box-shadow: 0px 0px 0.625rem #eaeaea;
		z-index: 1000;
		border-radius: 1.625rem;
		display: flex;
		justify-content: space-between;
	}

	.canvas-bg {
		/* margin: 0 auto; */
		/* margin-top: 1rem; */
		height: 88vw;
		width: 88vw;
		float: left;
		/* box-shadow: 0px 0px 0.625rem #55ffff; */
		/* z-index: 1000; */
		/* border-radius: 1.625rem; */
		/* display: flex; */
		/* justify-content: space-between; */
	}

	.carNum {
		border: 1px solid black;
		width: 1.8rem;
		height: 2.6rem;
		margin-top: 0.2rem;
		text-align: center;
		line-height: 2.6rem;
	}

	/* .carNum:hover {
		border: 1px solid red;
	} */

	.isNumClick {
		border: 1px solid red;
	}

	/* .carNum:hover ~ #two { background-color: yellow; } */


	.bottom {
		margin: 0 auto;
		margin-top: 5rem;
		margin-bottom: 3rem;
		bottom: 7rem;
		width: 90%;
		height: 3rem;
		background-color: #18ab4e;
		color: white;
		line-height: 3rem;
		font-size: x-large;
		text-align: center;
		border-radius: 1rem;
	}

	.bottom-after {
		margin: 0 auto;
		margin-top: 7rem;
		margin-bottom: 3rem;
		bottom: 7rem;
		width: 90%;
		height: 3rem;
		color: white;
		line-height: 3rem;
		font-size: x-large;
		text-align: center;
		border-radius: 1rem;
		background-color: #b4bdcb;
	}
</style>
